<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title></title>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div th:fragment="historySearch">

    <div class="historySearch">
        <!-- 历史搜索 -->
        <div class="modal fade hisSearchModalStyle" id="hisSearchModal">
            <div class="modal-dialog modal-lg  box box-primary" style="width:1200px">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">设备历史查询</h4>
                    </div>

                    <div class="modal-body" style="padding-top:0;">
                        <form action="#" class="searchForm" method="post">
                            <div class="box-header with-border">
                                <div class="searchStartData form-group col-lg-3">
                                    <label class="col-xs-3 control-label">起始日期</label>

                                    <div class="col-xs-8 date starts" data-provide="datepicker">
                                        <div class=" input-group">
                                            <div class="input-group-addon">
                                                <span class="fa fa-calendar"></span>
                                            </div>
                                            <input type="text" class="form-control pull-right" placeholder="请输入查询时间"
                                                   value=" " readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-lg-2 searchEndData mr20">
                                    <label class="col-xs-1 control-label">至</label>

                                    <div class="col-xs-10 date" data-provide="datepicker">
                                        <div class=" input-group">
                                            <div class="input-group-addon">
                                                <span class="fa fa-calendar"></span>
                                            </div>
                                            <input type="text" class="form-control pull-right" placeholder="请输入查询时间"
                                                   value=" " readonly>
                                        </div>
                                    </div>
                                </div>
                                <!-- 设备编号 -->
                                <div class="form-group col-lg-3 mr20">
                                    <label class="col-xs-3 control-label">安装地址</label>

                                    <div class="col-xs-8 hisSearchDev">
                                        <input type="text" class="form-control"
                                               th:attr="data-fv-regexp-message='设备编号不能为空'" data-fv-regexp="true"
                                               data-fv-regexp-regexp="^[0-9a-zA-Z\-\_]+$"/>
                                    </div>
                                </div>
                                <!-- 报警类型 -->
                                <div class="form-group has-feedback col-lg-2 hisAlarmType mr20">
                                    <label class="col-xs-4 control-label">报警类型</label>

                                    <div class="col-xs-7">
                                        <select class="form-control">
                                            <option>全部</option>
                                            <option alarmType="001">火警</option>
                                            <option alarmType="003">故障</option>
                                            <option alarmType="002">低电</option>
                                        </select>
                                    </div>
                                </div>
                                <ul class="smokeHisSearchList hisSearchList-style">
                                    <!-- TODO -->
                                </ul>
                                <div class="form-group col-lg-1">
                                    <div class="box-tools col-xs-2">
                                        <button type="button" id="hisSearchBtn" class="btn btn-primary btn-sm"
                                                data-toggle="modal">查询
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <p class="resultSum"><i>查询结果：</i><span>0</span> 条记录</p>

                        <div class="box-body no-padding hisSearchTitle hisSearchTitleStyle">
                            <table class="table table-striped table-bordered table-hover dataTable">
                                <thead>
                                <tr class="bg-light-blue disabled">

                                    <th>
                                        设备名称
                                    </th>
                                    <th>
                                        设备地址
                                    </th>
                                    <th>
                                        报警类型
                                    </th>
                                    <th>
                                        发生时间
                                    </th>
                                    <th>
                                        结束时间
                                    </th>
                                    <th>
                                        处理方式
                                    </th>
                                    <th>
                                        处理人
                                    </th>
                                    <th>
                                        设备编码
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- TODO -->

                                <!-- loading -->
                                <!-- <div class="overlay"><i class="fa fa-refresh fa-spin"></i></div> -->

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            //$("#box-widget").activateBox();
            //起始时间日历初始化
            $('.date').datepicker({
                language: "zh-CN",
                autoclose: true,
                startView: 0,
                format: "yyyy-mm-dd",
                clearBtn: false
                //todayBtn: true
            });
            $(function () {
                // 搜索列表的2px border显示问题
                function hide2border() {
                    if (!($(".smokeHisSearchList>li").length)) {
                        $(".smokeHisSearchList").hide();
                    } else {
                        $(".smokeHisSearchList").show();
                    }
                }

                //显示历史查询模态框
                var flag = true;
                $(".smokeDeviceHistory").click(function () {
                    $("#hisSearchModal").modal('show');
                    if (flag) {
                        var startTime = $(".searchStartData input").val() + " 00:00:00";
                        var endTime = $(".searchEndData input").val() + " 23:59:59";
                        $.ajax({
                            url: "/alarm/data/history/list?beginTime=" + startTime + "&endTime=" + endTime + "&deviceTypeId=" + devTypeId,
                            type: 'GET',
                            async: false,
                            success: function (result) {

                                if (result.status == 200) {
                                    //请求成功去掉loading状态
                                    $(".hisSearchTitle tbody").html('');
                                    if (!result.data.length) {
                                        winTip.alert("暂无数据!");
                                    } else {

                                        $("#hisSearchModal .resultSum span").text(result.data.length);
                                        for (var i = 0; i < result.data.length; i++) {
                                            var data = result.data[i];
                                            var alarmStatus;
                                            if (data.alarmType.alarmCode == '001') {
                                                alarmStatus = "火警";
                                            } else if (data.alarmType.alarmCode == '003') {
                                                alarmStatus = "故障";
                                            } else if (data.alarmType.alarmCode == '002') {
                                                alarmStatus = "低电";
                                            }
                                            var beginTime = moment(data.beginTime).format('YYYY-MM-DD HH:mm:ss')
                                            var endTime = data.endTime;
                                            if (endTime) {
                                                endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss')
                                            } else {
                                                endTime = "";
                                            }
                                            var disposeStatus = data.disposeStatus ? data.disposeStatus : "";
                                            if (disposeStatus == 1) {
                                                disposeStatusStr = "已处理";
                                            } else if (disposeStatus == 2) {
                                                disposeStatusStr = "未处理";
                                            } else {
                                                disposeStatusStr = "";
                                            }
                                            var disposePeople = data.disposePeople ? data.disposePeople : "";
                                            $(".hisSearchTitle tbody").prepend('<tr><td>' + data.device.deviceName + '</td><td>' + data.address + '</td><td>' + alarmStatus + '</td><td>' + beginTime + '</td><td>' + endTime + '</td><td>' + disposeStatusStr + '</td><td>' + disposePeople + '</td><td>' + data.device.devCode + '</td></tr>');

                                        }
                                    }

                                } else {
                                    winTip.alert(result.message);
                                }
                            }
                        });
                        flag = false;
                    }


                });
                $(".searchStartData input").val(moment().add('days', -6).format('YYYY-MM-DD'));
                $(".searchEndData input").val(moment().format('YYYY-MM-DD'));
                $(".hisSearchTitle tbody").css("marginBottom", "37px");
                //      根据设备地址选择设备

                var hisSearchCode;
                //点击不是列表的地方隐藏列表
                $(document).on("click", function () {
                    $(".smokeHisSearchList").hide();
                });
                //获取焦点时，模糊查询
                $(".hisSearchDev input").on("input", function () {

                    if ($(".smokeHisSearchList li")) {
                        $(".smokeHisSearchList li").remove();
                    }
                    //获取搜索内容

                    var searchContent = $(".hisSearchDev input").val().trim();
                    //if (searchContent) {
                    $.ajax({
                        url: "/device/data/list/bydeviceTypeandaddresslike/" + devTypeId + "/" + searchContent + "/byuser",
                        type: "GET",
                        async: false,
                        success: function (result) {

                            if (result.status == "200") {
                                for (var i = 0; i < result.data.length; i++) {
                                    var address = result.data[i].address;
                                    var latitude = result.data[i].latitude;
                                    var longitude = result.data[i].longitude;
                                    var devCode = result.data[i].devCode
                                    if (address) {
                                        $(".smokeHisSearchList").prepend('<li devicecode="' + devCode + '" longitude="' + longitude + '" latitude="' + latitude + '"><i class="fa fa-map-marker"></i>' + address + '</li>');
                                    }
                                }
                            } else {
                                winTip.alert(result.message);
                            }
                        }

                    });
                    //点击搜索列表将完整地址放入input内
                    $(".smokeHisSearchList").on("click", "li", function () {
                        var address = $(this).text();
                        hisSearchCode = $(this).attr("devicecode");
                        var searchAddress = $(".hisSearchDev input").val(address);
                        $(".smokeHisSearchList").hide();
                        return false;
                    });
                    // }

                    $(".smokeHisSearchList").show();
                    hide2border();
                });

                //点击查询按钮

                var timeoutflag = null;
                $("#hisSearchBtn").on("click", function (e) {
                    //点击查询添加loading
                    $(".hisSearchTitle tbody").html('<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>');

                    $(this).attr("disabled", "true");
                    setTimeout(function () {
                        $("#hisSearchBtn").removeAttr("disabled");
                    }, 1000);
                    //设置搜索日期
                    var searchStartData = $(".searchStartData input").val();
                    var searchEndData = $(".searchEndData input").val();
                    if (searchStartData && searchEndData) {
                        $(".smokeHisSearchList").hide();

                        var startTime = $(".searchStartData input").val() + " 00:00:00";
                        var endTime = $(".searchEndData input").val() + " 23:59:59";
                        var devCode = $(".hisSearchDev input").val();
                        var alarmType;
                        var optionVal = $(".hisAlarmType select").find("option:selected").attr("alarmType");
                        var searchContent = $(".hisSearchDev input").val().trim();

                        var nextUrl;

                        hisSearchCode = hisSearchCode ? hisSearchCode : "";
                        $(".hisSearchDev input").keydown(function (e) {
                            if (e.keyCode == 8) {
                                hisSearchCode = "";
                                $(".smokeHisSearchList li").remove();
                            }
                        });
                        if (optionVal) {
                            if (optionVal == "001") {
                                alarmType = "001";
                            } else if (optionVal == "003") {
                                alarmType = "003";
                            } else if (optionVal == "002") {
                                alarmType = "002";
                            }
                            if (searchContent) {
                                nextUrl = "/alarm/data/history/list?beginTime=" + startTime + "&endTime=" + endTime + "&alarmTypeCode=" + alarmType + "&address=" + searchContent + "&deviceTypeId=" + devTypeId;//+deviceTypeId

                            } else {
                                nextUrl = "/alarm/data/history/list?beginTime=" + startTime + "&endTime=" + endTime + "&alarmTypeCode=" + alarmType + "&deviceTypeId=" + devTypeId;//+deviceTypeId

                            }

                        } else if (searchContent) {
                            alarmType = "";
                            nextUrl = "/alarm/data/history/list?beginTime=" + startTime + "&endTime=" + endTime + "&address=" + searchContent + "&deviceTypeId=" + devTypeId;//+deviceTypeId

                        } else if (!searchContent) {
                            nextUrl = "/alarm/data/history/list?beginTime=" + startTime + "&endTime=" + endTime + "&deviceTypeId=" + devTypeId;
                        }
                        $("#hisSearchModal .resultSum span").text(0);
                        $.ajax({
                            url: nextUrl,
                            type: 'GET',
                            async: false,
                            success: function (result) {

                                if (result.status == 200) {
                                    //请求成功去掉loading状态
                                    $(".hisSearchTitle tbody").html('');
                                    if (!result.data.length) {
                                        winTip.alert("暂无数据!");
                                    } else {

                                        $("#hisSearchModal .resultSum span").text(result.data.length);
                                        for (var i = 0; i < result.data.length; i++) {
                                            var data = result.data[i];
                                            var alarmStatus;
                                            if (data.alarmType.alarmCode == '001') {
                                                alarmStatus = "火警";
                                            } else if (data.alarmType.alarmCode == '003') {
                                                alarmStatus = "故障";
                                            } else if (data.alarmType.alarmCode == '002') {
                                                alarmStatus = "低电";
                                            }
                                            var beginTime = moment(data.beginTime).format('YYYY-MM-DD HH:mm:ss')
                                            var endTime = data.endTime;
                                            if (endTime) {
                                                endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss')
                                            } else {
                                                endTime = "";
                                            }
                                            var disposeStatus = data.disposeStatus ? data.disposeStatus : "";
                                            if (disposeStatus == 1) {
                                                disposeStatusStr = "已处理";
                                            } else if (disposeStatus == 2) {
                                                disposeStatusStr = "未处理";
                                            } else {
                                                disposeStatusStr = "";
                                            }
                                            var disposePeople = data.disposePeople ? data.disposePeople : "";
                                            $(".hisSearchTitle tbody").prepend('<tr><td>' + data.device.deviceName + '</td><td>' + data.address + '</td><td>' + alarmStatus + '</td><td>' + beginTime + '</td><td>' + endTime + '</td><td>' + disposeStatusStr + '</td><td>' + disposePeople + '</td><td>' + data.device.devCode + '</td></tr>');

                                        }
                                    }

                                } else {
                                    winTip.alert(result.message);
                                }
                            }
                        });

                    }
                });
            });
        </script>
    </div>
</div>
</body>

</html>
